<template>
    <div class="icon_big">
        <div class="yuan"></div>
        <div class="shu">
            <div class="zuo"></div>
            <div class="zuo you"></div>
        </div>
    </div>
</template>
<script setup>
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.icon_big {
    width: 100%;
    height: 100%;
    position: relative;
}

.yuan {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    border: r(1) solid #14bae2;
    position: absolute;
    bottom: 0;
    left: 0;
}

.shu {
    position: absolute;
    top: r(2);
    right: r(2);
    height: r(1);
    background-color: #14bae2;
    width: r(6);
    transform: rotateZ(-45deg);
    transform-origin: center right;

    .zuo {
        width: r(3);
        height: r(1);
        background-color: #14bae2;
        position: absolute;
        right: 0;
        top: -100%;
        transform: rotateZ(45deg);
    }
    .you{
        top: unset;
        bottom: -100%;
        transform: rotateZ(-45deg);
    }
}
</style>